<template>
  <div class="message_main">
    <el-menu
      :default-active="queryHash"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <router-link to="HomeIndex">
        <el-menu-item index="1"> 首页 </el-menu-item>
      </router-link>
      <router-link to="introduce">
        <el-menu-item index="2"> 硒简介 </el-menu-item>
      </router-link>
      <router-link to="history">
        <el-menu-item index="3"> 硒山水 </el-menu-item>
      </router-link>
      <router-link to="foot">
        <el-menu-item index="4"> 硒美食 </el-menu-item>
      </router-link>
    </el-menu>
  </div>
</template>

<script>
import { defineComponent,onMounted } from "vue";
import { ElMenu, ElMenuItem, ElCarousel } from "element-plus";
export default defineComponent({
  components: {
    ElMenu,
    ElMenuItem,
    ElCarousel,
  },
  setup() {
    const query = window.location.hash.split('/')[1]
    let queryHash = "1"
    const queryPlus = ()=>{
      switch(query){
        case 'HomeIndex':
          queryHash = '1'
          break;
        case 'introduce':
          queryHash = '2'
          break;
        case 'history':
          queryHash = '3'
          break;
        case 'foot':
          queryHash = '4'
          break;
      }
    }
    queryPlus()
    return {queryHash};
  },
});
</script>

<style lang="less" scoped>
.message_main {
  width: 100%;
  height: 100%;
  .el-menu {
    width: 100%;
    box-sizing: border-box;
    background: #00000014;
    border: 0;
    border-bottom: 1px solid white;
    .el-menu-item {
      width: 150px;
      font-size: 18px;
      display: flex;
      flex-direction: column;
    }
    .el-menu-item:focus {
      background: transparent;
    }
    .is-active {
      color: #ffcc33 !important;
      border-bottom: 1px solid #ffcc33;
      font-size: 20px;
    }
    a {
      text-decoration: none;
      color: black;
    }
  }
}
</style>
